﻿@{
    ViewBag.Title = "ExamDatil";

}
<style>
    .submit-exam {
        border: 1px solid;
        width: 200px;
        padding: 20px;
        position: fixed;
        top: 118px;
        right: 100px;
        background-color: #fff;
    }

        .submit-exam .item {
            margin-bottom: 5px;
        }
</style>
<h2>@ViewBag.Exam.Name<br /><small>( 总分: @ViewBag.Exam.TotalPoint　 时长: @ViewBag.Exam.Duration 　题数: @ViewBag.Exam.Question.Count )</small></h2>

<style type="text/css">
    .question-body {
        padding: 30px 30px 20px 30px;
        background: #FFF;
    }

    ul#exampaper-body {
        margin-bottom: 0px;
    }

        ul#exampaper-body li {
            padding-bottom: 0px;
        }

    .question-body {
        min-height: 300px;
    }
</style>
<div class="content" style="margin-bottom: 100px;">
    <div class="container">
        <div class="row">
            @if (@ViewBag.Exam.Question.Count <= 0)
            {
                <div class="alert alert-warning alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert"
                            aria-hidden="true">
                        &times;
                    </button>
                    没有题目
                </div>
            }
            @{
                var i = 0;
            }
            @foreach (var question in @ViewBag.Exam.Question)
            {
                {
                    i++;
                }

                <div class="col-xs-9" style="padding-right: 0px;   margin-bottom: 20px; padding-bottom: 20px;  border-bottom: 1px solid #eee;">
                    <div class="def-bk" id="bk-exampaper">
                        <div class="expand-bk-content" id="bk-conent-exampaper">
                            <div id="exampaper-header">

                                <div id="exampaper-desc-container">
                                    <div id="exampaper-desc" class="exampaper-filter">
                                        <div class="panel panel-default">
                                            <div class="panel-body">
                                                <b>题目 @i : </b> <div id="questionName">@question.Title </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="exampaper-body">
                                <div class="radio">
                                    <label>
                                        A.
                                        <input type="radio" name="@i"
                                               value="A"> 
                                        @question.FirstOption
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="@i"
                                               value="B"> 
                                        B.@question.SecondOption
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="@i"
                                               value="C"> 
                                        C. @question.ThirdOption
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="@i"
                                               value="D"> 
                                        D. @question.ForthOption
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            }


        </div>
    </div>
</div>
<div class="submit-exam">
    <div class="item">考试总时长: <em style="font-weight:bold; text-decoration:underline;" id="remainTime" class="text-info">@ViewBag.Exam.Duration</em> 分钟</div>
    <div id="txt" class="item">@ViewBag.Exam.Duration</div>


    <hr />
    <div><button type="button" id="submitExam"class="btn btn-primary">提交答案</button></div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body" id="resultContent">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        console.log('start exam');
        var submitExam = function()
        {

            var tempAnswer = {};
            $('input').each(function () {
                if ($(this)[0].checked) {
                    console.log($(this)[0].name, $(this)[0].value);
                    tempAnswer[$(this)[0].name] = $(this)[0].value;
                }
            });
            var answer = [];
            for(var i =1; i <= @ViewBag.Exam.Question.Count; i++)
            {
                if(tempAnswer[i] != null){
                    answer.push(tempAnswer[i]);
                }else{
                    answer.push(-1);
                }
            }
            $.ajax({
                url: '@Url.Action("AnswerExam", "Student")',
                type: 'post',
                data: { id: '@ViewBag.ExamId', answer: answer },
                error: function (result) {
                    $("#resultContent").html(result.responseText);
                    $('#myModal').modal('show');
                },
                success: function (info) {
                    $('.submit-exam').hide();
                    window.location.href = '@Html.Raw(Url.Action("ExamHistory", "Student"))';
                    console.log(info);
                }
            });
            console.log(answer);
        }
        $('#submitExam').on("click", submitExam);
    });


    var times = "@ViewBag.Exam.Duration";
    function time()
    {
        times = times -1;
        $('#txt').html(times);
    }
    $(function(){
        var today=new Date();
        var h=today.getHours();
        var m=today.getMinutes();
        var s=today.getSeconds();
        // add a zero in front of numbers<10
        m=checkTime(m);
        s=checkTime(s);
        


        setInterval("time()",1000);
    });
</script>